import { useAppSelector } from '@/store';
import {
  addChannelAction,
  delChannelAction,
  getAllChgannelAction,
  getUserChgannelAction,
} from '@/store/action/channel';
import styles from './index.module.scss';
import { Popup, Tabs, Toast } from 'antd-mobile';
import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import Icon from '../Icon';
import { ChannelListType } from '@/store/reducer/channel';
import { useHistory } from 'react-router-dom';
export default function Channnel() {
  const history = useHistory();
  const { channelList, allList } = useAppSelector((state) => state.channel);
  const [visible, setVisible] = useState(false);
  const [editTable, setEditTable] = useState(false);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getAllChgannelAction());
    dispatch(getUserChgannelAction());
  }, [dispatch]);
  //添加频道
  const handleAddChannel = async (data: ChannelListType) => {
    console.log('data', data);
    await dispatch(addChannelAction(data));
    Toast.show({ content: '添加成功' });
  };
  const handleDelById = async (id: number) => {
    if (channelList.length <= 5)
      return Toast.show({ content: '频道至少有五个' });
    if (id === 0) return Toast.show({ content: '不能删除推荐频道' });
    await dispatch(delChannelAction(id));
    Toast.show({ content: '删除成功' });
  };
  //计算推荐频道列表
  const restList = allList.filter((item) => {
    return channelList.findIndex((v) => v.id === item.id) === -1;
  });
  return (
    <div className={styles.root}>
      <Tabs defaultActiveKey="0" className="tabs">
        {channelList.map((item) => (
          <Tabs.Tab title={item.name} key={item.id} />
        ))}
      </Tabs>
      <div className="right">
        <Icon type="iconbtn_search" onClick={() => history.push('/search')} />
        <Icon
          type="iconbtn_channel"
          onClick={() => {
            setVisible(true);
            setEditTable(false);
          }}
        />
      </div>
      {/* 编辑频道弹出层 */}
      <Popup
        visible={visible}
        position="left"
        bodyClassName={styles.channelPopup}
      >
        {/* 顶部栏：带关闭按钮 */}
        <div className="channel-header">
          <Icon
            type="iconbtn_channel_close"
            onClick={() => setVisible(false)}
          />
        </div>

        {/* 频道列表 */}
        <div className="channel-content">
          {/* 当前已选择的频道列表 */}
          <div className="channel-item edit">
            <div className="channel-item-header">
              <span className="channel-item-title">我的频道</span>
              <span className="channel-item-title-extra">点击删除频道</span>
              <span
                className="channel-item-edit"
                onClick={() => setEditTable(!editTable)}
              >
                {editTable ? '完成' : '编辑'}
              </span>
            </div>

            <div className="channel-list">
              {channelList.map((item) => {
                return (
                  <span key={item.id} className="channel-list-item">
                    {item.name}
                    {editTable && (
                      <Icon
                        type="iconbtn_tag_close"
                        onClick={() => handleDelById(item.id)}
                      />
                    )}
                  </span>
                );
              })}
            </div>
          </div>

          {/* 推荐的频道列表 */}
          <div className="channel-item">
            <div className="channel-item-header">
              <span className="channel-item-title">频道推荐</span>
              <span className="channel-item-title-extra">点击添加频道</span>
            </div>
            <div className="channel-list">
              {restList.map((item) => {
                return (
                  <span
                    key={item.id}
                    className="channel-list-item"
                    onClick={() => handleAddChannel(item)}
                  >
                    {item.name}
                  </span>
                );
              })}
            </div>
          </div>
        </div>
      </Popup>
    </div>
  );
}
